<template>
    <view class="container">
        <view class="header-wrapper">
            <header-bar :config="config"></header-bar>
            <!-- <users-select @openUserDrawer="openSalesmanDrawer" /> -->
            <date-tab-bar @getNewData="getReportData" />
        </view>
        <view class="main" :class="{ 'main-show-time': activeTabIndex == 4 }">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downRefresh"
                :down="downOption"
                :fixed="false"
                @up="getReportData">
                <uni-drawer ref="showRight" mode="right" :width="320">
                    <drawer-container @reset="handleReset" @sure="handleSure">
                        <choose-salesman />
                    </drawer-container>
                </uni-drawer>
                <view class="list-wrapper">
                    <list-card
                        title="销售情况"
                        change-bg-color="#FFF9EA"
                        @click.native="goToSale"
                        :imgUrl="saleIcon"
                        :isHalf="true"
                        :list="saleList" />
                    <list-card
                        class="debt-receive"
                        title="应收账款"
                        change-bg-color="#F0F3FF"
                        @click.native="goToDebtReceivable"
                        :imgUrl="debtIcon"
                        :list="debtList" />
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import usersSelect from "./components/users-select.vue"
import dateTabBar from "./components/date-tab-bar.vue"
import chooseSalesman from "./components/choose-salesman.vue"
import listCard from "./components/list-card.vue"

import { GetPageModuleList } from "@/service/api/user.js"
import { getSaleStatistics, getCustomerStatistics } from "@/service/api/erp.js"

import saleIcon from "@/static/report-forms/sales.png"
import debtIcon from "@/static/report-forms/account-money.png"

import { mapState, mapMutations } from "vuex"
import { CHANGE_SALE_SEARCH_VAL, CHANGE_SALE_SELECTED, CHANGE_TAB_INDEX, CHANGE_DATE } from "@/store/mutation-type.js"

import utils from "@/utils/utils.js"

export default {
    components: {
        listCard,
        usersSelect,
        chooseSalesman,
        dateTabBar,
    },
    computed: {
        ...mapState("tabBar", ["activeTabIndex"]),
        ...mapState("report", ["startDate", "endDate", "selectedSalesman"]),
    },
    data() {
        return {
            config: {
                title: "业绩报表",
                centerSlot: true,
            },
            downOption: {
                textErr: "加载成功",
            },
            storeinfo: {},
            userinfo: {},
            saleinfo: {},
            jyPayment: {},
            jyProceeds: {},
            jyExpense: {},
            jyBalance: {},
            saleIcon,
            debtIcon,
            saleList: [
                {
                    text: "销售金额(元)",
                    value: 0,
                },

                {
                    text: "",
                    value: "",
                },
                {
                    text: "销售笔数(笔)",
                    value: 0,
                },
                {
                    text: "销售数量",
                    value: 0,
                },
                // {
                //     text: "销售毛利(元)",
                //     value: 0,
                // },
            ],
            debtList: [
                {
                    text: "期末应收(元)",
                    value: 0,
                },
                {
                    text: "期初应收(元)",
                    value: 0,
                },
                {
                    text: "本期增加(元)",
                    value: 0,
                },
                {
                    text: "本期减少(元)",
                    value: 0,
                },
            ],
        }
    },
    onLoad() {
        this.initData()
    },
    methods: {
        ...mapMutations("report", [CHANGE_SALE_SEARCH_VAL, CHANGE_SALE_SELECTED, CHANGE_DATE]),
        ...mapMutations("tabBar", [CHANGE_TAB_INDEX]),
        initData() {
            this.resetData()
            this[CHANGE_TAB_INDEX](0)
            this[CHANGE_DATE]({ startDate: utils.today().startDate, endDate: utils.today().endDate })
        },
        ModuleList() {
            const path = "?moduleName=storeinfo,userinfo,saleinfo,jy_payment,jy_proceeds,jy_expense,jy_balance"
            GetPageModuleList(path).then((res) => {
                if (res.State == 1) {
                    this.authorization = res.Data
                    this.authorization.forEach((e) => {
                        if (e.FunctionCode == "storeinfo") {
                            this.storeinfo = e
                        } else if (e.FunctionCode == "userinfo") {
                            this.userinfo = e
                        } else if (e.FunctionCode == "saleinfo") {
                            this.saleinfo = e
                        } else if (e.FunctionCode == "jy_payment") {
                            this.jyPayment = e
                        } else if (e.FunctionCode == "jy_proceeds") {
                            this.jyProceeds = e
                        } else if (e.FunctionCode == "jy_expense") {
                            this.jyExpense = e
                        } else if (e.FunctionCode == "jy_balance") {
                            this.jyBalance = e
                        }
                    })
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        resetData() {
            this[CHANGE_SALE_SEARCH_VAL]("")
            this[CHANGE_SALE_SELECTED]()
            uni.$emit("resetSalesmanList")
        },
        handleReset() {
            this.resetData()
            this.getReportData()
        },
        handleSure() {
            this.$refs.showRight.close()
            this.getReportData()
        },
        openSalesmanDrawer() {
            this.$refs.showRight.open()
        },
        closeDrawer() {
            this.$refs.showRight.close()
        },
        //刷新
        downRefresh() {
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
        // 初始化
        async getReportData() {
			uni.showLoading({
			    title: "加载中",
			})
            const commonParams = {
                startDate: this.startDate,
                endDate: this.endDate,
            }
            const params = JSON.parse(JSON.stringify(commonParams))
            if (this.selectedSalesman) {
                params.eCodeArr = [this.selectedSalesman.UserCode]
            }
            const p1 = getSaleStatistics(params).then((res) => {
                if (res.State == 1) {
                    const { BillCount, Total, Qty } = res.Data
                    this.saleList.forEach((item, index) => {
                        switch (index) {
                            case 0:
                                item.value = Total
                                break
                            case 2:
                                item.value = BillCount
                                break
                            case 3:
                                item.value = Qty
                                break
                        }
                    })
                }
            })
            const p2 = getCustomerStatistics(commonParams).then((res) => {
                if (res.State == 1) {
                    const { WjsTotal, TotalMoney, HjTotal, BdJsTotal } = res.Data
                    this.debtList.forEach((item, index) => {
                        switch (index) {
                            case 0:
                                item.value = WjsTotal
                                break
                            case 1:
                                item.value = TotalMoney
                                break
                            case 2:
                                item.value = HjTotal
                                break
                            case 3:
                                item.value = BdJsTotal
                                break
                        }
                    })
                }
            })
            Promise.all([p1, p2])
                .then(() => {
					uni.hideLoading();
                    that.mescroll.endBySize(1, 1)
                })
                .catch(() => {
					uni.hideLoading();
                    this.mescroll.endErr()
                })
            this.ModuleList()
        },
        goToDebtReceivable() {
            this.easyGoTo("/pages_erpA8/debt-receivable/index")
        },
        goToSale() {
            // 权限判断
            if (this.saleinfo.IsModule == 1) {
                // this.easyGoTo("/pages_erpA8/sale/index")
                this.easyGoTo("/pages_erpA8/new-sale/index")
            }
        },
    },
}
</script>

<style lang="scss">
.container {
    height: 100vh;
    overflow: hidden;

    .header-wrapper {
        background-color: $color-white;
    }

    ::v-deep .hx-navbar__content {
        background-color: $color-white !important;
    }
}

.main {
    height: calc(100% - 176rpx);

    .list-wrapper {
        padding: 32rpx;

        .debt-receive {
            margin-top: 32rpx;
        }
    }
}

.main-show-time {
    height: calc(100% - 176rpx - 60rpx);
}
</style>
